<template>
    <div class="article-container">
        <el-card class="filter-card">
  <div slot="header" class="clearfix">
    <!-- 面包屑路劲导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>文章管理</el-breadcrumb-item>
</el-breadcrumb>
 <!-- 面包屑路劲导航 -->
  </div>
  <!-- 数据筛选表单 -->
 <el-form ref="form" :model="form" label-width="40px" size="mini" >
      <el-form-item label="状态">
    <el-radio-group v-model="form.resource">
      <el-radio label="全部"></el-radio>
      <el-radio label="草稿"></el-radio>
       <el-radio label="待审核"></el-radio>
        <el-radio label="审核通过"></el-radio>
         <el-radio label="审核失败"></el-radio>
         <el-radio label="已删除"></el-radio>
    </el-radio-group>
  </el-form-item>
   <el-form-item label="频道">
    <el-select v-model="form.region" placeholder="请选择频道">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="日期">
   <el-date-picker
      v-model="form.date1"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']">
    </el-date-picker>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
 <!-- 数据筛选表单 -->
</el-card>
       

        <el-card class="box-card">
  <div slot="header" class="clearfix">
   根据筛选条件共查询到46147条结果：
 <!-- 面包屑路劲导航 -->
  </div>
  <!-- 数据列表 -->
  <!-- table数据
  把需要展示的数组聊表数据绑定给table组件的data属性
  注意你不用v-for遍历，他自己会便利
  2设置表格列 el-table-colunn
  width可以设置表格列的宽度
lable可以设置标题
prop用来设定要渲染的列表项数据指段
:data="articles" 从后台获取到的
   -->
 <el-table
      
      :data="tableData" 
      stripe
      class="list-table"
      size="mini"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="封页"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="标题"
       >
      </el-table-column>
      <el-table-column
        prop="address"
        label="状态">
      </el-table-column>
       <el-table-column
        prop="address"
        label="发布时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="发布时间">
      </el-table-column>
 <el-table-column
        prop="address"
        label="操作">
      </el-table-column>
    </el-table>
    <!-- 数据列表 -->
 <!-- 数据筛选表单 -->
</el-card>
 
 
    <!-- 分页查询 -->
    <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
<!-- 分页列表 -->
    </div>
</template>
<script>
import {getArticles} from '@/api/article';
export default {
    name:'ArticleIndex',
    components:{},
    props:{},
    data(){
        return{
 form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          articles:[]//文章数据列表
        }

    },
    computed:{

    },
    watch:{},
    created(){
this.loadArticles()
    },
    methods: {
      loadArticles(){
        getArticles().then(res=>{
          console.log(res)
          this.articles=res.data.data.results
        })
      },
         onSubmit() {
        console.log('submit!');
      }
    },
}
</script>
<style lang="less" scoped>
.filter-card{
    margin-bottom: 30px;
}
.list-table{
    margin-bottom: 20px;
}
</style>